<template>
  <view class="page-container">
    <S1Header title="功能配置" :on-back="goBack" />

    <view class="content-wrapper">
      <view class="settings-list">
        <view
          v-for="item in items"
          :key="item.id"
          class="settings-item"
          @click="onClick(item)"
        >
          <text class="item-title">
            {{ item.name }}
          </text>
          <view class="item-right">
            <image
              class="arrow-icon"
              src="https://ceshiweb.picaime.com/static/images/user/right.png"
              mode="aspectFit"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import S1Header from '@/components/S1Header.vue';

defineOptions({ name: 'FunctionConfig' });

// 功能配置项列表
// 1. 金额取整配置 -> 对应 PC端 价格设置（第8-18行的 price-set 部分）
// 2. 语音播报配置 -> 对应 PC端 系统设置中的语音播报、键盘播报、播报性别、播报速度、播报音调、播报音量（第90-160行）
//    注意：播报速度、播报音调、播报音量需要改成滑块形式
// 3. 打印二维码配置 -> 对应 PC端 系统设置中的设置地址、二维码底部文本（第78-89行）
// 4. 附加费用配置 -> 对应 PC端 附加费设置配置（第195-249行的 fujiafei_list 部分）
const items = ref([
  { id: 1, name: '金额取整配置', route: '/pages/common/priceRounding/index' },
  { id: 2, name: '语音播报配置', route: '/pages/common/voiceBroadcast/index' },
  { id: 3, name: '打印二维码配置', route: '/pages/common/qrCodeConfig/index' },
  { id: 4, name: '附加费用配置', route: '/pages/common/additionalFees/index' },
]);

const goBack = () => {
  uni.navigateBack();
};

const onClick = (item: { id: number; name: string; route: string }) => {
  // 跳转到对应的配置页面
  uni.navigateTo({
    url: item.route,
    fail: () => {
      uni.showToast({ title: `${item.name} 功能开发中`, icon: 'none' });
    },
  });
};
</script>

<style scoped lang="scss">
.page-container {
  min-height: 100vh;
  background-color: #f8f8f8;
}

.content-wrapper {
  padding: 20rpx 32rpx;
}

.settings-list {
  background-color: #fff;
  border-radius: 12rpx;
  overflow: hidden;
}

.settings-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100rpx;
  padding: 0 40rpx;
  border-bottom: 1rpx solid rgba(0, 0, 0, 0.06);

  &:last-child {
    border-bottom: none;
  }
}

.item-title {
  font-size: 30rpx;
  color: #333;
}

.item-right {
  display: flex;
  align-items: center;
}

.arrow-icon {
  width: 16rpx;
  height: 28rpx;
}
</style>
